<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Self-Driving Animation</title>
<style>
	*{
		padding:0;
		margin:0;
	}
	body{
		overflow:hidden;
	}
</style>
</head>
<body>
<canvas id="animationCanvas"></canvas>
<script >
	// 获取 canvas 元素并设置上下文
var canvas = document.getElementById('animationCanvas');
var ctx = canvas.getContext('2d');

// 设置 canvas 大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 动画对象
var ball = {
    x: 100,
    y: 100,
    radius: 30,
    color: 'blue',
    velocityX: 2,
    velocityY: 2
};

// 动画函数
function animate() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制小球
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
    ctx.fillStyle = ball.color;
    ctx.fill();
    ctx.closePath();

    // 更新小球位置
    ball.x += ball.velocityX;
    ball.y += ball.velocityY;

    // 检测边界碰撞
    if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
        ball.velocityX = -ball.velocityX;
    }
    if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
        ball.velocityY = -ball.velocityY;
    }

    // 请求下一帧
    requestAnimationFrame(animate);
}

// 开始动画
animate();

</script>
</body>
</html>